<template>
  <!-- <div style="height:100%"> -->
  <div class="management_review" flex="dir:top">
    <div class="button_Box" flex-box="0">
      <el-button type="danger" round>
        <el-icon class="el-icon--left">
          <Refresh />
        </el-icon>刷新
      </el-button>
      <el-button type="danger" round>
        <el-icon class="el-icon--left">
          <Download />
        </el-icon>导出
      </el-button>
    </div>
    <!-- <ReviewCenter /> -->
    <!-- <ProjectOwner /> -->
    <ReviewOrganization flex-box="0" />
    <div class="list_box" flex-box="1" flex="dir:top">
      <div flex-box="0">
        <div class="SELECT_Box"><span class="SPAN_WORD">评审类别</span>
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="SELECT_Box"><span class="SPAN_WORD">评审状态</span>
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <div class="SELECT_Box">
          <el-input v-model="input" placeholder="请输入" class="inputWidth300" />
        </div>
        <div class="SELECT_Box">
          <el-button plain type="primary">查询</el-button>
          <el-button plain type="warning">重置</el-button>
        </div>
      </div>

      <el-table :data="tableData" border style="width: 100%" flex-box="1">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>

      <Pagination :page="page" @getPageData="getPageData" flex-box='0' />
    </div>
  </div>
  <!-- </div> -->
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Refresh, Download } from '@element-plus/icons-vue';
import ReviewCenter from './Components/ReviewCenter/index.vue';
import ProjectOwner from './Components/ProjectOwner/index.vue';
import ReviewOrganization from './Components/ReviewOrganization/index.vue';
// import Pagination from "@/components/Common/Pagination/index.vue";

let page = reactive({
  pageSize: 10,
  pageNumber: 1,
  totalLength: 1,
  currentPage: 1,
});
const getPageData = () => { };

const value = ref('')
const input = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style lang="scss" scoped>
.management_review {
  width: 100%;
  height: 100%;
}
</style>